<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
    <script src="../layui/layui.js"></script>
    <style>
        .layui-carousel-arrow{
            width: 55px;
            border-radius: 0px;
            height: 100px;
            margin-top: 30px;
        }
        .top1{
            height: 40px;
            width: 100%;
            background-color: #333333;
            display: flex;
            justify-content: center;
        }
        .top1>.top1-content{
            width: 1180px;
            height: 100%;
            color: white;
        }
        .top1-content-left>span{
            color: #fff;
            cursor: pointer;
            display: inline-block;
            height: 100%;
            line-height: 20px;
            margin-right: 25px;
        }
        .top2 {
            height: 102px;
            width: 100%;
        }
        .top3 {
            height: 530px;
            width: 100%;
        }
    </style>
</head>
<body>

  <div class="main">
    <div class="top">
      <div class="top1">
          <div class="top1-content">
              <div class="top1-content-left" style="padding-top: 10px">
                  <span>帮助中心</span>
                  <span>收藏</span>
                  <span>360官网</span>
                  <span>360智慧生活</span>
              </div>
              <div class="top1-content-right"></div>
          </div>
      </div>
      <div class="top2">
          <div class="top2-content">

          </div>
      </div>
      <div class="top3">
          <div class="layui-carousel" id="test1">
              <div carousel-item style="height: 530px">
                  <img src="../img/carousel1.webp"/>
                  <img src="../img/carousel2.webp"/>
                  <img src="../img/carousel3.webp"/>
                  <img src="../img/carousel4.webp"/>
              </div>
          </div>
      </div>
    </div>
  </div>


  <script>
      layui.use('carousel', function(){
          var carousel = layui.carousel;
          //建造实例
          carousel.render({
              elem: '#test1'
              ,width: '100%' //设置容器宽度
              ,arrow: 'always' //始终显示箭头
              //,anim: 'updown' //切换动画方式
          });
      });
  </script>
</body>
</html>